<template>
  <view class="new_main">
    <view class="myContent">
      <view class="header_bg"></view>
      <view class="content_wrap">
        <!-- 用户详情 -->
        <view v-if="userInfo" class="my_info flex_between_center">
          <view
            style="position: relative"
            class="flex_center_align"
            @click="clickMenu"
          >
            <view v-if="userInfo.mobile" @click="goMyHome">
              <image
                class="avatar_img"
                :src="userInfo.avatar"
                mode="aspectFill"
              ></image>
            </view>
            <image
              v-else
              class="avatar_img"
              src="/static/img/my/index/no_login.png"
            ></image>
            <view class="name_wrap flex_column" @click="goMyHome">
              <view class="flex userName">
                <text class="name ellipsis1">{{
                  userInfo.mobile ? userInfo.nickname : "未登录"
                }}</text>
                <u-icon
                  v-if="userInfo.mobile"
                  name="arrow-right"
                  color="#333333"
                  size="14"
                ></u-icon>
              </view>
              <text class="tags fz26 ellipsis1">陪你每一天~</text>
            </view>
          </view>

          <!-- 右侧 -->
          <view class="tabBar">
            <view class="justify_end">
              <view class="nav_right">
                <view class="nav_pc" @click="showPcDsc">
                  <image
                    class="pc_icon"
                    src="/static/img/index/pc_icon.png"
                    mode=""
                  ></image>
                  <!-- PC版 -->
                </view>
                <view class="qiandao" @click="signIn">
                  <image
                    class="img100"
                    src="/static/img/index/qiandao_index.png"
                    mode=""
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 信息提示栏 -->
        <view class="my_hint">
          <view
            v-for="(item, index) in hintList"
            :key="index"
            class="hint_item"
            @click="hintClick(item)"
          >
            <view class="hint_num">{{ item.num }}</view>
            <view class="hint_name">{{ item.name }}</view>
            <view v-if="index == 1 && item.num > 0" class="loc tag">
              问答券
            </view>
            <view v-if="index == 2 && item.num > 0" class="loc dot"></view>
          </view>
        </view>

        <!-- vip -->
        <view class="vip">
          <!-- 未开通 -->
          <image
            v-if="!isLogin"
            class="vip-null"
            src="/static/img/my/new_my/card_null.png"
            mode="widthFix"
            @click="toPlatform()"
          >
          </image>
          <image
            v-else-if="userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 0"
            class="vip-null"
            src="/static/img/my/new_my/card_null.png"
            mode="widthFix"
            @click="toPlatform()"
          >
          </image>
          <!-- 卡 -->
          <template v-if="isLogin">
            <view
              class="vip_card"
              @click="toPlatform()"
              v-if="userInfo.is_wenda_vip != 0 || userInfo.is_99vip != 0"
            >
              <image
                v-if="userInfo.is_wenda_vip == 1"
                class="img"
                src="/static/img/my/new_my/m_card.png"
                mode="scaleToFill"
              />
              <image
                v-if="userInfo.is_wenda_vip == 2"
                class="img"
                src="/static/img/my/new_my/s_card.png"
                mode="scaleToFill"
              />
              <image
                v-if="userInfo.is_wenda_vip == 3"
                class="img"
                src="/static/img/my/new_my/y_card.png"
                mode="scaleToFill"
              />
              <image
                v-if="userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 1"
                class="img"
                src="/static/img/my/new_my/99_card.png"
                mode="scaleToFill"
              />
              <view class="vip_info">
                <view class="vip_info_right" v-if="userInfo.is_wenda_vip != 0">
                  <view class="right_title">{{
                    userInfo.is_wenda_vip == 1
                      ? "月度会员"
                      : userInfo.is_wenda_vip == 2
                      ? "季度会员"
                      : "年度会员"
                  }}</view>
                  <view class="right_time"
                    >到期时间：{{ userInfo.wenda_vip_end_time_text }}</view
                  >
                </view>
                <view
                  class="vip_info_right"
                  v-if="userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 1"
                >
                  <view class="right_title right_title1">99VIP会员</view>
                  <view class="right_time right_time1">永久会员</view>
                </view>
                <u-icon
                  name="arrow-right"
                  size="18"
                  :color="
                    userInfo.is_wenda_vip == 0 && userInfo.is_99vip == 1
                      ? '#FFFCF1'
                      : '#666'
                  "
                ></u-icon>
              </view>
            </view>
          </template>
        </view>

        <!-- 企服中心和邀请 -->
        <view class="service">
          <view class="service_item" @click="onService(1)">
            <view class="item_right">
              <view class="right_title">我的邀请</view>
              <view class="right_tips">邀请领积分</view>
            </view>
            <image
              class="item_img"
              src="/static/img/my/new_my/invite_my.png"
              mode="scaleToFill"
            />
          </view>

          <view class="line"></view>

          <view class="service_item" @click="onService(2)">
            <view class="item_right">
              <view class="right_title">企服中心</view>
              <view class="right_tips">大平台有保障</view>
            </view>
            <image
              class="item_img"
              src="/static/img/my/new_my/service_my.png"
              mode="scaleToFill"
            />
          </view>
        </view>

        <!-- 积分中心 -->
        <view class="points">
          <view
            class="points_item points_item1"
            @click="goPointsMall('/pointsMall/pointsDetail/index')"
          >
            <view class="item1_title">积分：</view>
            <view class="item1_num">{{
              userInfo.money ? userInfo.money : 0
            }}</view>
          </view>

          <view class="points_line"></view>

          <view
            class="points_item"
            @click="goPointsMall('/pointsMall/shopList/index')"
          >
            <image
              class="points_img"
              src="/static/img/my/new_my/mall_icon.png"
              mode="scaleToFill"
            />
            <view class="points_right">
              <view class="points_title">兑换商城</view>
              <view class="points_tips"
                >兑换好礼<u-icon
                  name="arrow-right"
                  size="10"
                  color="#B87970"
                ></u-icon
              ></view>
            </view>
          </view>

          <view class="points_line"></view>

          <view
            class="points_item"
            @click="goPointsMall('/pointsMall/index/index')"
          >
            <image
              class="points_img"
              src="/static/img/my/new_my/signIn_icon.png"
              mode="scaleToFill"
            />
            <view class="points_right">
              <view class="points_title"
                >已连签{{ userInfo.sign_day ? userInfo.sign_day : 0 }}天</view
              >
              <view class="points_tips"
                >签到领好礼<u-icon
                  name="arrow-right"
                  size="10"
                  color="#B87970"
                ></u-icon
              ></view>
            </view>
          </view>

          <image
            class="points_tag"
            src="/static/img/my/new_my/activity_icon.png"
            mode="scaleToFill"
          />
        </view>

        <!-- 常用功能-->
        <view class="menu_list">
          <view
            class="menu_item"
            v-for="(item, index) in menuList1"
            :key="index"
            @click="clickMenu(item)"
          >
            <view class="flex_center_align_column">
              <image :src="item.icon" class="icon"></image>
              <text class="title">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <!-- 积分兑换好礼 -->
        <view class="exchange">
          <view class="exchange_header">
            <view class="header_title">积分兑好礼</view>
            <view class="header_more" @click="goExchangeAll()"
              >查看全部
              <u-icon name="arrow-right" size="12" color="#666"></u-icon>
            </view>
          </view>
          <view class="giftList">
            <view
              v-for="(item, index) in giftList"
              :key="index"
              class="gift_item"
              @click="goShopDetail(item)"
            >
              <image :src="item.img" class="gift_icon"></image>
              <view class="gift_footer">
                <view class="gift_title">{{ item.name }}</view>
                <view class="gift_money">{{ item.money }}积分</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 打开系统通知弹窗 -->
      <view v-if="systemPopupShow">
        <systemPopup :systemPopupShow.sync="systemPopupShow"></systemPopup>
      </view>

      <!-- pc介绍 -->
      <view class="pc_dsc" v-if="showPcDscPopup">
        <u-popup
          mode="top"
          :show="showPcDscPopup"
          @close="showPcDscPopup = false"
          round="50rpx"
        >
          <view class="pc_dsc_title">登录小竹PC版</view>
          <view class="pc_dsc_text"
            >下载更方便 浏览更便捷 数据更完善 账号互联互通</view
          >
          <view class="website">
            <view class="site_txt">请在电脑浏览器打开 </view>
            <view class="site_txt1">www.xzcs2022.com</view>
            <view class="site_copy" @click="copyLink">复制</view>
          </view>
          <image
            class="site_img"
            src="/static/img/index/pc_dsc.png"
            mode="scaleToFill"
          />
          <view class="pc_copy" @click="copyLink">复制网址</view>
          <view class="pc_dsc_jump" @click="pcDscJump"
            >小竹PC版介绍<u-icon
              name="play-right-fill"
              size="12"
              color="#1483EF"
            ></u-icon
          ></view>
        </u-popup>
      </view>

      <!-- 完成任务弹窗 -->
      <pointsTips
        v-if="showPointsTips"
        :title="pointsObj.name"
        :points="pointsObj.amount"
      ></pointsTips>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/index/index"
></script>

<style lang="less" scoped>

.new_main {
  height: 100%;
  background-color: #f7f7f7;
}

.myContent {
  position: relative;
  background-color: #f7f7f7;
  overflow: hidden;
}

.header_bg {
  width: 100%;
  height: 300rpx;
  position: absolute;
  left: 0;
  top: 0;
  background: url("@/static/img/my/new_my/header_bg.png") no-repeat;
  background-size: 100%;
}

.content_wrap {
  padding: calc(var(--status-bar-height) + 36rpx) 33rpx 30rpx;
  // #ifdef H5
  padding-bottom: 60rpx;
  // #endif
  height: 100%;
  position: relative;

  // 个人信息
  .my_info {
    .userName {
      display: flex;
      align-items: center;

      .name {
        margin-right: 10rpx;
        line-height: 1;
      }
    }
    .avatar_img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 15rpx;
    }

    .renzheng_img {
      position: absolute;
      top: 80rpx;
      left: 90rpx;
      width: 40rpx;
      height: 40rpx;
    }

    .name_wrap {
      padding: 0 6rpx;

      .name {
        font-size: 40rpx;
        max-width: 284rpx;
      }
    }

    .title_icon {
      margin-left: 10rpx;
      margin-top: 10rpx;
      width: 138rpx;
      height: 41rpx;
    }

    .tags {
      margin-top: 10rpx;
      max-width: 400rpx;
    }
  }

  //个人信息右侧
  .tabBar {
    display: flex;
    align-items: center;

    .nav_right {
      display: flex;
      align-items: center;

      .nav_pc {
        margin-right: 30rpx;
        .pc_icon {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .qiandao {
        .img100 {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }

  // vip
  .vip {
    position: relative;

    .vip_card {
      margin-top: 30rpx;
      width: 680rpx;
      height: 120rpx;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }

      .vip_info {
        position: absolute;
        left: 120rpx;
        top: 0;
        width: 540rpx;
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .vip_info_right {
          .right_title {
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 600;
            color: #333333;
            line-height: 46rpx;
          }

          .right_time {
            margin-top: 10rpx;
            font-size: 20rpx;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 400;
            color: #404e69;
            line-height: 23rpx;
          }

          .right_title1 {
            color: #fffcf1;
          }

          .right_time1 {
            color: #a29e96;
          }
        }
      }
    }

    .vip-null {
      margin-top: 30rpx;
      width: 680rpx;
      height: 103rpx;
    }

    .vip-tip {
      position: absolute;
      left: 74rpx;
      top: 128rpx;

      .vip-text {
        font-size: 50rpx;
      }

      .vip-time {
        margin-top: 35rpx;
        font-size: 24rpx;
      }
    }
  }

  // 常用功能
  .menu_list {
    background: #fff;
    padding: 40rpx;
    border-radius: 15rpx;
    margin-top: 22rpx;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: end;
    /* 定义4列，每列平分空间 */
    .menu_item {
      width: 140rpx;
      margin-top: 60rpx;

      &:nth-child(-n + 4) {
        margin-top: 0;
      }

      .icon {
        margin-bottom: 20rpx;
        width: 46rpx;
        height: 46rpx;
      }

      .title {
        font-size: 28rpx;
        font-family: OPPOSans-Medium, OPPOSans;
        font-weight: 600;
        color: #161b27;
      }
    }
  }
}

// pc介绍弹窗
.pc_dsc {
  text-align: center;

  .pc_dsc_title {
    font-weight: 600;
    color: #333333;
    line-height: 46rpx;
    margin: 55rpx 0 22rpx 0;
  }

  .pc_dsc_text {
    font-size: 24rpx;
    color: #999999;
    line-height: 35rpx;
  }

  .website {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    line-height: 43rpx;
    margin-top: 60rpx;

    .site_txt {
      color: #333333;
    }

    .site_txt1 {
      color: #1483ef;
    }

    .site_copy {
      margin-left: 15rpx;
      width: 85rpx;
      height: 45rpx;
      background: #edf8fe;
      border-radius: 101rpx;
      text-align: center;
      line-height: 45rpx;
      color: #1b75c7;
      font-size: 24rpx;
    }
  }

  .site_img {
    width: 663rpx;
    height: 196rpx;
    margin: 34rpx auto 57rpx auto;
  }

  .pc_copy {
    width: 680rpx;
    height: 90rpx;
    background: #1c87f3;
    border-radius: 45rpx;
    margin: 0 auto;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 90rpx;
  }

  .pc_dsc_jump {
    font-size: 30rpx;
    color: #1483ef;
    line-height: 42rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 36rpx 0 56rpx 0;
  }
}

// 提示
.my_hint {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 30rpx;
  background: #f7f7f7;

  .hint_item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .hint_num {
      font-size: 50rpx;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 500;
      color: #333333;
      line-height: 59rpx;
    }

    .hint_name {
      margin-top: 14rpx;
      font-size: 26rpx;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      color: #333333;
      line-height: 30rpx;
    }

    .loc {
      position: absolute;
      top: 0;
      right: 0;
    }

    .tag {
      width: 74rpx;
      height: 29rpx;
      top: -10rpx;
      right: -50rpx;
      background: #ff3c3c;
      font-size: 20rpx;
      font-family: Source Han Sans, Source Han Sans;
      text-align: center;
      color: #ffffff;
      line-height: 29rpx;
      border-radius: 20rpx 20rpx 20rpx 0rpx;
    }

    .dot {
      width: 15rpx;
      height: 15rpx;
      background: #ff6161;
      border-radius: 50%;
    }
  }
}

// 企服中心和邀请
.service {
  width: 680rpx;
  height: 135rpx;
  margin-top: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  border-radius: 15rpx;

  .service_item {
    display: flex;
    align-items: center;

    .item_right {
      margin-right: 36rpx;

      .right_title {
        font-size: 30rpx;
        font-family: OPPOSans, OPPOSans;
        font-weight: 700;
        color: #333333;
        line-height: 40rpx;
      }

      .right_tips {
        margin-top: 6rpx;
        font-size: 22rpx;
        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        color: #999999;
        line-height: 29rpx;
      }
    }

    .item_img {
      width: 70rpx;
      height: 70rpx;
    }
  }

  .line {
    width: 1rpx;
    height: 50rpx;
    background: #eaeaea;
  }
}

// 积分中心
.points {
  width: 680rpx;
  margin-top: 28rpx;
  padding: 40rpx 0 30rpx 0;
  background: linear-gradient(180deg, #fdebdd 0%, #ffffff 100%);
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;

  .points_line {
    width: 2rpx;
    height: 80rpx;
    background: linear-gradient(
      180deg,
      rgba(244, 206, 187, 0) 0%,
      rgba(246, 194, 168, 0.5137) 49%,
      rgba(244, 206, 187, 0) 100%
    );
  }

  .points_item1 {
    flex-direction: column;

    .item1_title {
      font-size: 24rpx;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      color: #b87970;
    }

    .item1_num {
      font-size: 36rpx;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 600;
      color: #a13626;
      line-height: 42rpx;
    }
  }

  .points_item {
    display: flex;

    .points_img {
      width: 80rpx;
      height: 76rpx;
      margin-right: 8rpx;
    }

    .points_right {
      .points_title {
        font-size: 26rpx;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 700;
        color: #a13626;
        line-height: 30rpx;
      }

      .points_tips {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        color: #b87970;
        margin-top: 8rpx;
      }
    }
  }

  .points_tag {
    width: 132rpx;
    height: 40rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
}

// 积分兑换好礼
.exchange {
  margin-top: 55rpx;

  .exchange_header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_title {
      font-size: 36rpx;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 600;
      color: #333333;
      line-height: 42rpx;
    }

    .header_more {
      font-size: 24rpx;
      color: #666666;
      line-height: 28rpx;
      display: flex;
      align-items: center;
    }
  }

  .giftList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30rpx;

    .gift_item {
      width: 333rpx;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 10rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      &:nth-last-child(-n + 2) {
        margin-bottom: 0rpx;
      }

      .gift_icon {
        width: 333rpx;
        height: 244rpx;
      }

      .gift_footer {
        padding: 22rpx 26rpx 30rpx 26rpx;

        .gift_title {
          font-size: 30rpx;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 600;
          color: #333333;
          line-height: 35rpx;
        }

        .gift_money {
          margin-top: 17rpx;
          font-size: 26rpx;
          color: #e1931f;
          line-height: 30rpx;
        }
      }
    }
  }
}
</style>
